<template>
  <view class="safe-bottom">
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation back backColor title="搜索" />

    <!-- 搜索框 -->
    <u-sticky zIndex="10071">
      <view class="sticky">
        <backdrop
          :style="'margin-top:' + -(system.statusBarHeight + 44) + 'px'"
        />
        <view class="container">
          <search-input
            ref="searchInput"
            :searchLoad="searchLoad"
            :search="search"
            :cancelSearch="cancelSearch"
            :searchStatus="searchStatus"
            :changeShowType="changeShowType"
            :searchType="searchType"
            :typeList="typeList"
            :focus="focus"
          />
        </view>
      </view>
    </u-sticky>

    <view class="container content">
      <view class="page-container">
        <no-search :clickSearchItem="clickSearchItem" v-if="!searchStatus" />
        <list
          :searchList="searchList"
          :searchType="searchType"
          :searchLoad="searchLoad"
          :searchLoadStatus="searchLoadStatus"
          v-else
        />
      </view>
    </view>

    <!-- 搜服务搜匠人弹出层 -->
    <u-picker
      closeOnClickOverlay
      confirmColor="#37756D"
      :show="showType"
      :columns="columns"
      :defaultIndex="[[searchType]]"
      @confirm="confirmType"
      @close="changeShowType(false)"
      @cancel="changeShowType(false)"
      @touchmove.native.stop.prevent=""
    />
  </view>
</template>

<script>
import searchInput from "./components/searchInput";
import noSearch from "./components/noSearch";
import list from "./components/list";
import { mapGetters } from "vuex";

export default {
  components: { searchInput, noSearch, list },
  data() {
    return {
      searchStatus: false,
      searchType: 0, // 0服务 1匠人
      searchLoad: false,
      searchLoadStatus: "nomore",
      searchList: [],
      showType: false,
      focus: false,
      typeList: [
        {
          name: "搜服务",
        },
        {
          name: "搜匠人",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["system"]),
    columns() {
      return [
        this.typeList.map((item) => {
          return item.name;
        }),
      ];
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReady() {
    this.$nextTick(() => {
      this.focus = true;
    });
  },
  methods: {
    changeShowType(status) {
      this.showType = status;
    },
    confirmType({ indexs }) {
      this.searchType = indexs[0];
      this.changeShowType(false);
      this.search();
    },
    search() {
      this.searchStatus = true;
      this.$store.dispatch(
        "addSearchHistory",
        this.$refs.searchInput.searchVal
      );
      this.refresh();
    },
    cancelSearch() {
      if (!this.searchStatus) return this.$navigateBack();
      this.searchStatus = false;
      this.$refs.searchInput.searchVal = "";
    },
    clickSearchItem(val) {
      this.$refs.searchInput.searchVal = val;
      this.search();
    },
    refresh() {
      if (!this.searchStatus) return uni.stopPullDownRefresh();
      this.searchLoad = true;
      this.searchLoadStatus = "loading";
      setTimeout(() => {
        uni.stopPullDownRefresh();
        this.searchLoad = false;
        this.searchLoadStatus = "nomore";

        this.searchList = !this.searchType ? [1, 1, 1, 1, 1, 1, 1, 1, 1] : [];
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
}

.content {
  padding: 0 16px 16px;
}

.sticky {
  background: #fff;
  position: relative;
  overflow: hidden;
}
</style>